<template>
	<view class="input" type="text" placeholder="请选择地区">
		<picker range-key="name" class="pickerList" mode="multiSelector" :range="newProvinceDataList"
			:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
			<view  style="color: #808080;font-size: 16px;">{{select}}</view>
		</picker>
	</view>

</template>


<script>
	export default {
		name: "alvin-city-picker",
		model: {
			prop: 'value',
			event: 'input'
		},

		props: {
			value: {
				type: Array,
				default: []
			},
			options: {
				type: Array,
				default: []
			}
		},
		data() {
			return { 
				newProvinceDataList: [
					[],
					[]
				],
				multiIndex: [0, 0],
				select: '地区筛选',

				addressData: {
					name: '',
					phone: '',
					address: ''
				},
				binhao: '1'
			}
		},
		created() {
			this.restore(this.value);

		},
		watch: {
			value(newValue, oldValue) {
				if (newValue && newValue.length === 2) {
					if (typeof(newValue[0]) === 'object') {
						this.restore(newValue.map(item => item.code))
					} else {
						this.restore(newValue)
					}
				} else {
					this.select = '地区筛选';
					this.restore(newValue);
				}
			}
		},
		methods: {
			restore(value) {
				if (!value || value.length === 0) {
					this.newProvinceDataList = [
						[],[],
					]
					for (let i = 0; i < this.options.length; i++) {
						this.newProvinceDataList[0].push(this.options[i]);
					}
					for (let i = 0; i < this.options[0].children.length; i++) {
						this.newProvinceDataList[1].push(this.options[0].children[i]);
					}
				} else {
					let p = value[0];
					let c = value[1]
					let selectIndex = [];
					let tmpSelectP = "";
					let tmpSelectC = "";
					let tmpSelectA = "";
					this.newProvinceDataList[0] = [];
					this.newProvinceDataList[1] = [];
					for (let i = 0; i < this.options.length; i++) {
						this.newProvinceDataList[0].push(this.options[i]);
						if (this.options[i].code === p) {
							selectIndex.push(i);
							tmpSelectP = this.options[i].name
							for (let j = 0; j < this.options[i].children.length; j++) {
								let city = this.options[i].children[j]
								this.newProvinceDataList[1].push(city);
								if (city.code === c) {
									tmpSelectC = city.name;
									selectIndex.push(j);
								}
							}
						}
					}
					this.select =
						`${tmpSelectP}/${tmpSelectC} `
					this.multiIndex = [...selectIndex];
				}
			},
			// 省市区确认事件
			pickerChange(e) {
				const that = this;
				that.multiIndex = e.detail.value;
				that.select =
					`${that.newProvinceDataList[0][that.multiIndex[0]].name}/${that.newProvinceDataList[1][that.multiIndex[1]].name} `
				let p = that.newProvinceDataList[0][that.multiIndex[0]];
				let c = that.newProvinceDataList[1][that.multiIndex[1]]
				that.$emit("input",
					[p.code, c.code]);
				that.$emit("change",
					[{
							name: p.name,
							code: p.code
						},
						{
							name: c.name,
							code: c.code
						}
					]);
			},
			pickerColumnchange(e) {
				// 第一列滑动
				if (e.detail.column === 0) {
					this.multiIndex[0] = e.detail.value
					// console.log('第一列滑动');
					// this.newProvinceDataList[1] = [];
					this.newProvinceDataList[1] = this.options[this.multiIndex[0]].children

					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
				}
			}
		}
	}
</script>

<style>


</style>
